<template>
  <div class="detail">
    <!-- 顶部 -->
    <div class="detail-item">
      <img
        v-if="Information && Information.img"
        @click="getImage(Information.img)"
        :src="Information.img"
        alt="图片" />
      <img
        v-else
        src="@/assets/product/空白页.png"
        alt="图片" />
      <div class="detail-item-footer" v-if="Information">
        <h3 class="detail-item-text">{{ Information.productName }}</h3>
        <div class="detail-item-sku">sku {{ Information.sku }}</div>
      </div>
    </div>

    <!-- 底部 -->
    <div
      v-for="(item, index) in infoTitle"
      :key="index"
      class="detail-content">
      <div class="detail-content-title">{{ item }}</div>
      <div class="detail-content-item">
        <img
          v-if="infoContent.length && infoContent[index].indexOf('http') > -1"
          @click="getImage(infoContent[index])"
          :src="infoContent[index]" alt="商品介绍">
        <div v-else class="default">{{infoContent[index]}}</div>
      </div>
    </div>
  </div>
</template>

<script>
// import { findProductById } from '@/api/index'
import { ImagePreview } from 'vant';
export default {
  components: {
    [ImagePreview.Component.name]: ImagePreview.Component
  },
  data() {
    return {
      Information: {}, // 商品信息
      infoTitle: [], // 介绍标题
      infoContent: [] // 介绍内容
    }
  },
  activated() {
    this.getInformation()
  },
  deactivated() {
    sessionStorage.removeItem('productInfo')
    this.infoTitle = []
    this.infoContent = []
  },
  methods: {
    getImage(url) {
      ImagePreview({
        images: [url]
      });
    },

    /* 路由跳转过来处理数据 */
    getInformation() {
      this.Information = JSON.parse(sessionStorage.getItem('productInfo'))
      const imgList = this.Information.img.split('$').filter(Boolean)
      if(imgList.length > 0) {
        this.Information.img = imgList[0]
      }
      console.log(this.Information.img.split('$').filter(Boolean).length > 0, '详情');
      if (this.Information && this.Information.titles) {
        this.infoTitle = this.Information.titles.split(',')
        this.infoContent = this.Information.titlesImg.split('$')
      } else {
        this.infoTitle = ['暂无更多信息']
        this.infoContent = [this.Information.productName]
      }
    }
  }
}
</script>

<style lang="scss" scoped>
  .detail {
    min-height: 607px;
    background-color: #f2f2f2;
    position: relative;
    width: 100%;
    padding: 25px 21px 0;

    /* 商品展示部分css */
    .detail-item {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      // margin-top: 20px;
      .detail-item-footer {
        width: 100%;
        .detail-item-sku {
          color: #b1b1b1;
          font-size: 12px;
          text-align: center;
          margin-bottom: 40px;
        }
        .detail-item-text {
          color: #3a77d9;
          font-size: 18px;
          text-align: center;
          font-weight: 700;
          margin-bottom: 10px;
        }
      }
      img {
        width: 100%;
        // height: 271px;
        margin-bottom: 20px;
      }
    }
    .detail-content {
      // padding: 0 15px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      margin-bottom: 20px;
      .detail-content-title {
        width: 120px;
        height: 31px;
        background-color: #535353;
        color: #fff;
        border-radius: 5px;
        font-size: 16px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 20px;
        // text-align: center;
      }
      .detail-content-item {
        width: 100%;
        height: 100%;
        img {
          width: 100%;
          height: 100%;
        }
        .default {
          text-align: center;
        }
      }
    }
  }
</style>
